<template>
  <div class="vuefinder__toolbar justify-normal items-center h-16 py-0">
    <div
      class="flex items-center bg-primary-1 text-primary-6 rounded-3xl px-3 py-1.5"
      v-if="!app.requestParams.disabled && (isManager || app.fs.data.dir_id)"
    >
      <a-upload
        multiple
        v-if="isManager || app.fs.data.options.permissions.addfile"
        :showUploadList="false"
        :before-upload="beforeUpload"
      >
        <div class="flex items-center cursor-pointer text-primary-6">
          <span class="iconfont icon-TX-add pr-1"></span>
          <span>添加</span>
        </div>
      </a-upload>
      <div
        v-if="
          isManager ||
          (app.fs.data.options.permissions.addfile &&
            app.fs.data.options.permissions.addfolder)
        "
        class="h-4 w-px bg-primary-6 opacity-10 mx-3"
      ></div>
      <div
        class="flex items-center cursor-pointer"
        v-if="isManager || app.fs.data.options.permissions.addfolder"
        @click="app.modal.open(ModalNewFolder, { items: ds.getSelected() })"
      >
        <span class="iconfont icon-TX-folder-add pr-1"></span>
        <span>新建文件夹</span>
      </div>
    </div>
    <div
      class="flex flex-row-reverse items-center justify-between mx-3 flex-1 h-16"
    >
      <div class="flex items-center text-neutral-6">
        <div class="flex items-center" v-if="app.requestParams.showToggleView">
          <GridViewSVG class="size-[16px] p-x-[2px] cursor-pointer" v-if="app.view === 'list'" @click="toggleView" />
          <ListViewSVG class="size-[16px] p-x-[2px] cursor-pointer" v-else @click="toggleView" />
          <a-divider type="vertical" style="width: 1px; margin: 0 12px; background-color: rgba(0, 0, 0, 0.06);" />
        </div>
        <span>共</span>
        <span class="text-black px-1">{{
          app.fs.data.files.filter((n) => n.type !== 'dir').length
        }}</span>
        <span>个文件</span>
      </div>
      <a-breadcrumb v-if="!searchQuery">
        <template #separator>
          <span class="iconfont icon-chevron-right text-neutral-6"></span>
        </template>
        <a-breadcrumb-item
          class="cursor-pointer hover:text-primary-6"
          @click="
            app.emitter.emit('vf-fetch', {
              params: { dir: 'local://', dir_id: 0 },
            })
          "
          >全部文件</a-breadcrumb-item
        >
        <a-breadcrumb-item v-if="app.fs.breadcrumbs.length > MAX_ITEMS">
          <span class="cursor-pointer hover:text-primary-6">...</span>
          <template #overlay>
            <a-menu>
              <a-menu-item
                v-for="(item, index) in app.fs.breadcrumbs.slice(0, MAX_ITEMS)"
                :key="index"
              >
                <span
                  @click="
                    app.emitter.emit('vf-fetch', {
                      params: { dir: item.path, dir_id: item.dir_id },
                    })
                  "
                  >{{ item.name }}</span
                >
              </a-menu-item>
            </a-menu>
          </template>
        </a-breadcrumb-item>
        <a-breadcrumb-item
          class="cursor-pointer hover:text-primary-6"
          v-for="(item, index) in showBreadcrumbs"
          :key="index"
          @click="
            app.emitter.emit('vf-fetch', {
              params: { dir: item.path, dir_id: item.dir_id },
            })
          "
          >{{ item.name }}</a-breadcrumb-item
        >
      </a-breadcrumb>
    </div>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { computed, inject, ref, watch, toRefs } from 'vue'
import { FEATURES } from '../features.js'
import ModalNewFolder from './modals/ModalNewFolder.vue'
import ModalRename from './modals/ModalRename.vue'
import ModalDelete from './modals/ModalDelete.vue'
import ModalUpload from './modals/ModalUpload.vue'
import ModalUnarchive from './modals/ModalUnarchive.vue'
import ModalArchive from './modals/ModalArchive.vue'
import NewFolderSVG from './icons/new_folder.svg'
import NewFileSVG from './icons/new_file.svg'
import RenameSVG from './icons/rename.svg'
import DeleteSVG from './icons/delete.svg'
import UploadSVG from './icons/upload.svg'
import ArchiveSVG from './icons/archive.svg'
import UnarchiveSVG from './icons/unarchive.svg'
import LoadingSVG from './icons/loading.svg'
import FullscreenSVG from './icons/full_screen.svg'
import MinimizeSVG from './icons/minimize.svg'
import GridViewSVG from './icons/grid_view.svg'
import ListViewSVG from './icons/list_view.svg'
import { getFileSuffix } from '../utils/common.js'

const app = inject('ServiceContainer')
const { setStore } = app.storage
const { t } = app.i18n
const props = defineProps({
  isManager: {
    type: Boolean,
    default: false,
  },
})
const { isManager } = toRefs(props)
const ds = app.dragSelect
const searchQuery = ref('')
const MAX_ITEMS = ref(2) // 最大显示项数（含首尾）
const showBreadcrumbs = computed(() => {
  if (app.fs.breadcrumbs.length <= MAX_ITEMS.value) return app.fs.breadcrumbs
  return app.fs.breadcrumbs.slice(-MAX_ITEMS.value)
})

app.emitter.on('vf-search-query', ({ newQuery }) => {
  searchQuery.value = newQuery
})

const toggleFullScreen = () => {
  app.fullScreen = !app.fullScreen
}

const beforeUpload = (file) => {
  handleUpload(file)
  return false
}

const handleUpload = (file) => {
  app.emitter.emit('vf-fetch-upload', {
    params: {
      file,
    },
    body: {
      title: file.name,
      dir: app.fs.data.dirname,
      dir_id: app.fs.data.dir_id,
      size: file.size,
      extention: getFileSuffix(file.type)['subcategory'],
    },
    onSuccess: () => {
      app.emitter.emit('vf-fetch', {
        params: { dir: app.fs.data.dirname, dir_id: app.fs.data.dir_id },
      })
    },
    onError: (e) => {
      message.error(t(e.message))
    },
  })
}

watch(
  () => app.fullScreen,
  () => {
    if (app.fullScreen) {
      // add body overflow hidden
      document.querySelector('body').style.overflow = 'hidden'
    } else {
      // remove body overflow hidden
      document.querySelector('body').style.overflow = ''
    }
    setStore('full-screen', app.fullScreen)
    app.emitter.emit('vf-fullscreen-toggle')
  }
)

// View Management
const toggleView = () => {
  app.view = app.view === 'list' ? 'grid' : 'list'
  ds.refreshSelection()
  setStore('viewport', app.view)
}
</script>
